/*
 * @Author: 自迩
 * @Date: 2022-02-07 18:46:37
 * @LastEditTime: 2022-03-22 10:55:57
 * @LastEditors: your name
 * @Description:
 * @FilePath: \silence-reader\src\components\ToolBar\index.jsx
 */
import React,{useContext} from 'react';
import {toolBarPropsContext} from "../../pages/book"
import './index.css';


function ToolBar(props) {
  // console.log("俺是ToolBar");
  const {toolBarProps, toolBarDispatch} = useContext(toolBarPropsContext)
  const {top, left, display, styleBtnFlag, selectedText} = toolBarProps
  let {highLine, underLine, deleteStyle} = props
  const handleMouseDown = (e)=>{
    e.stopPropagation()

  }
  const handleClick = ()=>{
    toolBarDispatch({type:"clearToolBarDisplay"})
  }

  const copy = () => {
    navigator.clipboard.writeText(selectedText).then(function() {
      console.log('copy success');
    }, function() {
      console.error('copy failure');
    });

  }
  const deleteStyleEvent = ()=>{
    deleteStyle(selectedText)
    toolBarDispatch({type:"styleBtnDisplay",data:false})
  }

  return (
    <div className='toolBar' onMouseDown={handleMouseDown} onClick={handleClick} style={{top:top, left:left, display: display? 'block':'none'}}>
      <button className='copy' onMouseUp={copy}>复制</button>
      <button className='underLine' onMouseUp={underLine(selectedText)}>划线</button>
      <button className='highLine' onMouseUp={highLine(selectedText)}>高亮</button>
      <button className='note' onMouseUp={ e=> toolBarDispatch({type:"noteBoxDisplay",data:true}) }>笔记</button>
      <button className='delStyle'  onMouseUp={deleteStyleEvent} style={{visibility:styleBtnFlag? 'visible':'hidden'}} >删除样式</button>
    </div>
  )
}
export default React.memo(ToolBar)